<template>
	<view class="container all_server">
		<view class="server_top">
			<view class="account" :style="{color: type === 'account1' ? '#00ff94' : 'white'}"
				@click="changeType('account1')">
				待接工单</view>
			<view class="xian"></view>
			<view class="account" :style="{color: type === 'account2' ? '#00ff94' : 'white'}"
				@click="changeType('account2')">
				已接工单</view>
		</view>

		<!-- 待接工单 -->
		<view class="unorder" v-if="type === 'account1'">
			<view class="order_tab" v-for="(item,index) in unordermsg" :key="index">
				<view class="order_msg">
					<view class="time">2023-04-27 14:57</view>
					<view class="order_type">工单类型：
						<text v-if="item.workType === 0">设备安装</text>
						<text v-if="item.workType === 1">设备维修</text>
					</view>
					<view class="order_name">客户名称：{{item.userName}}
					</view>
					<view class="order_name">详细地址：{{item.userAddress}}</view>
					<view class="order_btn" @click="gdxq(item.id,item.userId)">
						点击查看工单详情
					</view>
				</view>
				<view class="order_img">
					<view class="takeorder" @click="orderJd(item.id)">
						立即接单
					</view>
				</view>
			</view>
		</view>

		<!-- 已接工单 -->
		<view class="unorder" v-if="type === 'account2'">
			<view class="order_tab" v-for="(item,index) in ordermsg" :key="index">
				<view class="order_msg">
					<view class="time">2023-04-27 14:57</view>
					<view class="order_type">工单类型：
						<text v-if="item.workType === 0">设备安装</text>
						<text v-if="item.workType === 1">设备维修</text>
					</view>
					<view class="order_name">客户名称：{{item.userName}}
					</view>
					<view class="order_name">详细地址：{{item.userAddress}}</view>
					<view class="order_btn" @click="gdxq(item.id,item.userId)">
						点击查看工单详情
					</view>
				</view>
				<view class="order_img">
					<view class="takeorder ordercolor" @click="orderJd(item.id)">
						已接单
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $http from "@/ajax/http.js";
	export default {
		data() {
			return {
				unordermsg: [],
				ordermsg: [],
				type: 'account1',
			}
		},
		methods: {
			changeType(newType) {
				const that = this
				that.type = newType;
				if (that.type == "account1") {
					that.getUnRecOrderList();
				} else {
					that.getRecOrderList();
				}
				console.log('当前type的值为：', that.type);
			},

			getUnRecOrderList() {
				$http.request({
					url: "/waiter/index/getUnRecOrderList",
					method: 'GET'
				}).then((res) => {
					console.log(res, "res");
					this.unordermsg = res
				})
			},

			getRecOrderList() {
				$http.request({
					url: "/waiter/index/getRecOrderList",
					method: 'GET'
				}).then((res) => {
					console.log(res, "res");
					this.ordermsg = res
				})
			},

			orderJd(id) {
				wx.showModal({
					title: "提示",
					content: '您是否确定账单无误？',
					success: (res) => {
						if (res.confirm) {
							$http.request({
								url: "/waiter/index/confirmRecOrder",
								data: {
									workOrderId: id
								},
								method: 'GET'
							}).then((res) => {
								if (res.code == 200) {
									wx.showToast({
										title: '您已提交成功！',
									});
									this.getUnRecOrderList();
								} else {
									wx.showToast({
										title: '请求失败',
									});
								}
								console.log(res, "res");
								this.ordermsg = res
							})
						} else if (res.cancel) {
							wx.showToast({
								title: '您已取消',
							});
						}
					}
				});

			},

			gdxq(id, userId) {
				uni.navigateTo({
					url: `/pages/server/orderxq/index?id=${id}&userId=${userId}`
				});
			}


		}
	}
</script>

<style scoped lang="scss">
	@import '@/common/sass/all/all.scss';

	.all_server {
		width: 750rpx;
		width: 100%;
		background: linear-gradient(to top, RGBA(2, 81, 84, 1), RGBA(18, 145, 157, 1));
	}

	.server_top {
		width: 670rpx;
		display: flex;
		flex-direction: row;
		margin-top: 40rpx;
		margin-bottom: 40rpx;

		.account {
			color: #00FF95;
		}

		.xian {
			position: relative;
			width: 1rpx;
			height: 30rpx;
			background-color: #89c8ce;
			margin-top: 10rpx;
			margin-left: 35rpx;
			margin-right: 35rpx;
		}
	}

	.unorder {
		.order_tab {
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-direction: row;
			width: 678rpx;
			height: 234rpx;
			background-color: #ffffff;
			border-radius: 15rpx;
			margin-top: 16rpx;

			.order_msg {
				display: flex;
				flex-direction: column;
				height: 188rpx;

				.time {
					font-weight: 400;
					font-size: 18rpx;
					color: #9FA0A0;
				}

				.order_type {
					font-weight: 600;
					font-size: 26rpx;
					color: #3E3A39;
					margin-top: 15rpx;
					margin-bottom: 10rpx;

					text {
						color: #00818c;
					}
				}

				.order_name {
					font-weight: 400;
					font-size: 21rpx;
					color: #4C4948;
					line-height: 32rpx;
				}

				.order_btn {
					margin-top: 15rpx;
					width: 205rpx;
					height: 38rpx;
					line-height: 38rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #00828C;
					border-radius: 25rpx;
					background-color: #efefef;
					text-align: center;
				}
			}


			.order_img {
				width: 173rpx;
				height: 170rpx;
				border-left: 1rpx solid #cecece;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.takeorder {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 140rpx;
					height: 140rpx;
					background-color: #00828c;
					border-radius: 50%;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}

				.ordercolor {
					color: #0b848f;
					background-color: #e6e6e6;
				}
			}


		}
	}
</style>